<template>
    <view class="container">
        <!-- 顶部状态栏 -->
        <view class="header">
            <view class="hospital-info" v-if="currentHospital">
                {{ currentHospital.name }}
            </view>
        </view>

        <!-- 扫码区域 -->
        <view class="scan-section">
            <view class="scan-box" @tap="handleScan">
                <image src="/static/images/scan-icon.png" mode="aspectFit"></image>
                <text>扫码开锁</text>
            </view>
            <view class="scan-tip">请扫描设备上的二维码</view>
        </view>

        <!-- 功能导航 -->
        <view class="nav-section">
            <view class="nav-title">快捷功能</view>
            <view class="nav-grid">
                <view class="nav-item" @tap="navigateTo('/pages/order/list')">
                    <image src="/static/images/order-icon.png" mode="aspectFit"></image>
                    <text>我的订单</text>
                </view>
                <view class="nav-item" @tap="navigateTo('/pages/feedback/index')">
                    <image src="/static/images/feedback-icon.png" mode="aspectFit"></image>
                    <text>故障反馈</text>
                </view>
                <view class="nav-item" @tap="callService">
                    <image src="/static/images/service-icon.png" mode="aspectFit"></image>
                    <text>联系客服</text>
                </view>
                <view class="nav-item" @tap="navigateTo('/pages/guide/index')">
                    <image src="/static/images/guide-icon.png" mode="aspectFit"></image>
                    <text>使用指南</text>
                </view>
            </view>
        </view>

        <!-- 使用说明 -->
        <view class="guide-section">
            <view class="guide-title">使用说明</view>
            <view class="guide-steps">
                <view class="step-item">
                    <view class="step-num">1</view>
                    <view class="step-text">扫描设备二维码</view>
                </view>
                <view class="step-item">
                    <view class="step-num">2</view>
                    <view class="step-text">支付使用费用</view>
                </view>
                <view class="step-item">
                    <view class="step-num">3</view>
                    <view class="step-text">开始使用设备</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            currentHospital: null,
            servicePhone: '400-888-8888'
        }
    },
    onShow() {
        this.getCurrentHospital()
    },
    methods: {
        // 处理扫码
        async handleScan() {
            // 检查是否登录
            const token = uni.getStorageSync('token')
            if (!token) {
                uni.navigateTo({
                    url: '/pages/login/index'
                })
                return
            }

            try {
                const res = await uni.scanCode({
                    onlyFromCamera: true,
                    scanType: ['qrCode']
                })

                // 验证二维码格式
                try {
                    const codeData = JSON.parse(res.result)
                    if (codeData.type === 'device' && codeData.deviceNo) {
                        // 跳转到设备详情页
                        uni.navigateTo({
                            url: `/pages/device/detail?code=${codeData.deviceNo}`
                        })
                    } else {
                        throw new Error('无效的设备码')
                    }
                } catch (error) {
                    uni.showToast({
                        title: '无效的二维码',
                        icon: 'none'
                    })
                }
            } catch (error) {
                if (error.errMsg !== 'scanCode:fail cancel') {
                    uni.showToast({
                        title: '扫码失败',
                        icon: 'none'
                    })
                }
            }
        },

        // 获取当前医院信息
        async getCurrentHospital() {
            try {
                const location = await this.getLocation()
                const res = await getNearbyHospital(location)
                this.currentHospital = res
            } catch (error) {
                console.error('获取医院信息失败', error)
            }
        },

        // 获取位置信息
        getLocation() {
            return new Promise((resolve, reject) => {
                uni.getLocation({
                    type: 'gcj02',
                    success: resolve,
                    fail: reject
                })
            })
        },

        // 页面导航
        navigateTo(url) {
            uni.navigateTo({ url })
        },
        
        // 呼叫客服
        callService() {
            uni.makePhoneCall({
                phoneNumber: this.servicePhone,
                fail: () => {
                    uni.showToast({
                        title: '拨打失败',
                        icon: 'none'
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background-color: #f5f5f5;
    
    .header {
        padding: 40rpx 30rpx;
        background-color: #fff;
        
        .hospital-info {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
        }
    }
    
    .scan-section {
        padding: 60rpx 0;
        text-align: center;
        background-color: #fff;
        margin-bottom: 20rpx;
        
        .scan-box {
            width: 200rpx;
            height: 200rpx;
            margin: 0 auto;
            background: #f8f8f8;
            border-radius: 20rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            
            image {
                width: 80rpx;
                height: 80rpx;
                margin-bottom: 20rpx;
            }
            
            text {
                font-size: 28rpx;
                color: #333;
            }
        }
        
        .scan-tip {
            margin-top: 20rpx;
            font-size: 24rpx;
            color: #999;
        }
    }
    
    .nav-section {
        padding: 30rpx;
        background-color: #fff;
        margin-bottom: 20rpx;
        
        .nav-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 30rpx;
        }
        
        .nav-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20rpx;
            
            .nav-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                
                image {
                    width: 60rpx;
                    height: 60rpx;
                    margin-bottom: 10rpx;
                }
                
                text {
                    font-size: 24rpx;
                    color: #666;
                }
            }
        }
    }
    
    .guide-section {
        padding: 30rpx;
        background-color: #fff;
        
        .guide-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 30rpx;
        }
        
        .guide-steps {
            display: flex;
            justify-content: space-around;
            
            .step-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                
                .step-num {
                    width: 60rpx;
                    height: 60rpx;
                    line-height: 60rpx;
                    text-align: center;
                    background: #07c160;
                    color: #fff;
                    border-radius: 30rpx;
                    margin-bottom: 10rpx;
                }
                
                .step-text {
                    font-size: 24rpx;
                    color: #666;
                }
            }
        }
    }
}
</style> 